<template>
  <FormDrawer ref="formDrawerRef" title="设置商品详情" @submit="submit" destroy-on-close>
    <el-form :model="form">
      <el-form-item>
        <Editor v-model="form.content"/>
      </el-form-item>
    </el-form>
    </FormDrawer>
  
</template>

<script setup>
import { reactive, ref } from 'vue'
import FormDrawer from "~/components/FormDrawer.vue";
import Editor from "~/components/Editor.vue"
import { readGoods,updateGoods } from '~/api/goods.js'
import { toast } from "~/composables/util.js";

const formDrawerRef = ref(null)

const form = reactive({
  content:""
})

const goodsId = ref(0)
const open =(row)=>{
  //console.log(row);
  goodsId.value = row.id
  row.contentLoading = true
  readGoods(goodsId.value)
  .then(res=>{
    //console.log(res.goodsBanner.map(o=>o.url));
    form.content = res.content
    formDrawerRef.value.open()
  }).finally(()=>{
    row.contentLoading = false
  })
  
}

const emit = defineEmits(["reloadData"])
const loading = ref(false)
const submit =()=>{
  formDrawerRef.value.showLoading()
  updateGoods(goodsId.value,form)
  .then(res=>{
    toast("设置商品详情成功")
    formDrawerRef.value.close()
    emit("reloadData")
    
  }).finally(()=>[
    formDrawerRef.value.hideLoading()
  ])
}

defineExpose({
  open
})
</script>

<style lang='scss'>
</style>